<template>
	<view class="content">
		<view style="width: 750rpx;padding: 10rpx 30rpx;">
			<u-search @search="search" :show-action="false" bg-color="#fff" placeholder="搜索账号/手机号" v-model="keyword"></u-search>
		</view>
		<view style="font-size: 25rpx;color: #6f6f6f;margin-top: 20rpx;display: flex;align-items: center;">
			<view style="margin-right: 20rpx;">
				我的账号: {{ $store.state.user.user.account }}
			</view>
			<image style="width: 40rpx;height: 40rpx;" src="/static/images/icon_ewm.png" mode=""></image>
		</view>
		<view v-if="searchInit" style="width: 750rpx;background: white;display: flex;flex-direction: column;margin-top: 20rpx;">
			<useritem v-for="(item,key) in data" :showChange="showChange" :id="item.id" :name="item.name" :phone="item.phone" :avatar="item.avatar" />
		</view>
		<view v-if="data.length ==0 && searchInit" style="margin-top: 120rpx;">
			<u-empty mode="search"></u-empty>
		</view>
		
		<u-popup v-model="show" mode="bottom" border-radius="16">
			<view style="padding: 30rpx;">
				<userinfo :data="data[0]" />
			</view>
		</u-popup>
	</view>
</template>

<script>
	import useritem from './components/useritem.vue'
	import userinfo from './components/userinfo.vue'
	export default {
		data(){
			return {
				searchInit:false,
				keyword:"",
				data:[],
				show:false
			}
		},
		onLoad({id}) {
			if(id){
				console.log(id)
				this.goseatchbyid(id)
			}
		},
		components:{
			useritem,userinfo
		},
		methods:{
			goseatchbyid:async function(id){
				const ret = await this.$u.get(`user/user/searchById/${id}`)
				this.searchInit = true
				const findarsd = ret.data
				this.data = [findarsd]
				console.log(this.data)
			},
			showChange:function(){
				this.show = !this.show
			},
			search:async function(){
				this.searchInit = true
				const _this = this
				if(!this.keyword){
					this.data = []
				}else{
					const ret = await this.$u.get(`/user/user/search`,{keyword:this.keyword})
					const dataorg = ret.data.filter((e)=>{
						return e.id != _this.$store.state.user.user.id
					})
					this.data = ret.success ? dataorg : []
				}
			}
		}
	}
</script>

<style scoped>
	page{
		background: #f3f3f3;
	}
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f3f3f3;
		width: 750rpx;
		height: 100vh;
	}
</style>